<template>
    <div class="food_list" v-if="index === 0">
        <!-- 
            items	分类显示所需的数据	
            height	高度，默认单位为px	
            main-active-index	左侧选中项的索引 -->
        <van-tree-select
            :main-active-index="data.active"
            :items="foodDate.items"
            height="60vh"
            @click-nav="onNavClick" 
        >
            <template #content>
                <div v-for="(item,index) in data.subItem" :key="index">
                    <FoodAdd :item="item" :addClick="addClick" ></FoodAdd>
                </div>
            </template>
        </van-tree-select>
    </div>
</template>

<script setup>  

import { reactive } from 'vue';
import FoodAdd from '../../../components/FoodAdd.vue';
let props = defineProps(['foodDate','index']);
let data = reactive({
    active: 0,
    subItem:[] //子组件需要接收逇数据
})
let init = () => {
    props.foodDate.items.forEach((item, index) => {
        if (data.active == index) {
            data.subItem = item.children;
        }
    });
}
init();
const addClick = (i) => {
    data.subItem.forEach(item => {
        if (item.id == i) {
            item.add = false;
            item.num = 1;
        }
      })
}
const onNavClick = (index) => {
    console.log(index);
    data.active = index;
    init();
}
</script>

<style scoped>
    /deep/.van-sidebar-item--select::before{
      background-color: #ffc400;
    }
</style>
